<template>
  <div class="join">
    <div class="loading" v-show="isLoading">加载中...</div>
    <div class="topTips" v-if="deleteIco&&!isLoading">
      <div class="tipsLeft">
        <div class="tLIcon"><i class="el-icon-circle-check-outline"></i></div>
        <div>此二维码安全，您可放心长按扫码进群。</div>
      </div>
      <div class="tipsRight" @click="deleteIcon"><i class="el-icon-close"></i></div>
    </div>
    <div class="content" v-show="!isLoading">
      <div class="title" v-show="isShowImage">{{name}}</div>
      <div class="desc" v-show="isShowImage">{{description}}</div>
      <div class="qrcode" v-show="isShowImage">
        <img width="100%" height="100%" :src="imageData" alt="">
      </div>
      <div v-if="isShowImage">
        <div class="tip">无法加群，请联系微信：
          <el-tag
            size="small"
            v-clipboard="() => wechat"
            v-clipboard:success = "clipboardSuccessHandler"
            v-clipboard:error = "clipboardErrorHandler"
          >
            {{wechat}}
          </el-tag>
          <p class="copy">点击微信号即可复制</p>
        </div>
      </div>
      <div class="error-tip" v-else>
        <p style="text-align: center">{{text}}</p>
        <div style="display: flex;justify-content: center;martgin-top:50px;">
          <el-tag
            v-clipboard="() => copyText"
            v-clipboard:success = "clipboardSuccessHandler"
            v-clipboard:error = "clipboardErrorHandler"
          >复制微信号</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { Toast } from 'mint-ui';
import service from '../service/join';
import CryptoJS from 'crypto-js'

export default {
  data() {
    return {
      isLoading: true,
      wechat: 'xxxxx',
      description: '',
      isShowImage: true,
      text: '',
      title: '',
      name: '', // '这里是图片，这里最大三行文字。恭喜您，还有少数分班名额，以下是您的专属班级群二维码，赶紧扫码入群，更多详情请查看群内公告',
      imageData: '', // 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      deleteIco: true,
    };
  },
  computed: {
    copyText() {
      if (this.text.indexOf('：') !== -1) {
        return this.text.split('：')[1];
      } else {
        return this.text.split(':')[1];
      }
      /* eslint-enable */
    },
  },
  mounted() {
    const { appId, openId, groupCollectionId } = this.$route.query;
    let key = '7679687142304b666c72416464315345544269786e73594f6473476657493869';
    let encrypted = CryptoJS.AES.encrypt(openId, CryptoJS.enc.Hex.parse(key), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    service.getJoinInfo({
      groupCollectionId,
      openidApp: encrypted.ciphertext.toString(),
      appIdApp: appId,
    }).then((info) => {
      // save openid and groupcollectionid in cookie.
      this.title = info.title;
      this.description = info.description;
      this.isShowImage = info.isShowImage;
      this.name = info.name;
      this.imageData = info.imageData;
      this.text = info.text;
      this.wechat = info.wechat;
      this.isLoading = false;
    }, () => {
      alert('暂时无法获取群库信息，请稍后再试');
      this.isLoading = false;
    });
  },
  methods: {
    clipboardSuccessHandler() {
      Toast({
        message: '微信号复制成功',
        iconClass: 'el-icon-success',
      });
    },
    clipboardErrorHandler() {

    },
    deleteIcon() {
      this.deleteIco = false;
    },
  },
};
</script>
<style lang="less" scoped>
.join {
  .content {
    color: #333;
    padding: 25px;
    .title {
      font-size: 21px;
      line-height: 21px;
      text-align: left;
      font-weight: bold;
    }
    .desc {
      margin: 10px 0 25px 0;
      color: #999;
    }
    .qrcode {
      text-align: center;
      max-width: 640px;
      margin-bottom: 16px;
    }
    .tip {
      text-align: center;
      font-size: 12px;
      line-height: 18px;
    }
    .error-tip {
      margin-top: 160px;
      font-size: 12px;
      text-align: center;
    }
  }
}
  .topTips{
    font-size: 13px;
    background: #9ed35f;
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
    color: #fff;
    align-items: center;
    .tipsLeft{
      display: flex;
      align-items: center;
    }
    i{
      font-size: 16px;
    }
    .tLIcon{
      margin-bottom: -2px;
      margin-right: 5px;
    }
    .tipsRight{
      margin-bottom: -2px;
    }
  }
  .copy{
    text-align: center;
    font-size: 10px;
    color: #999;
    margin-top: 5px;
  }
</style>

